<template>
  <div id="mapheeead">
    <el-tabs type="border-card">
      <el-tab-pane label="室内"
        >室内
        <div class="div1">
          <img class="shell" :src="bigimg" alt="" />
        </div>
        <div>
          <img
            v-for="(item, index) in imglist"
            @click="bigimg = item"
            :key="index"
            class="shell1"
            :src="item"
            alt=""
          />
          <!--   <img class="shell1" src="" alt="">
          <img class="shell1" src="" alt=""> -->
        </div>
        <div class="indoor">
          <el-row>
            <el-col :span="10">
              <h1 style="font-size: 25px">{{form.buildingName}}</h1>
            </el-col>
            <el-col :span="10"><h2>4100.00元</h2></el-col>
          </el-row>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label-width="0">
              <div>{{form.houseInformation}}</div>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>

      <el-tab-pane label="小区图"
        >小区图
        <div class="div1">
          <img class="shell" :src="steet" alt="" />
        </div>
        <div>
          <img
            v-for="(item, index) in streetimg"
            @click="steet = item.src"
            :key="index"
            class="shell1"
            :src="item.src"
            alt=""
          />
          <!--  <img class="shell1" src="./../img/龙湖天宸原著小区图2G.webp" alt="">
          <img class="shell1" src="./../img/龙湖天宸原著小区图3.webp" alt=""> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="街景地图"
        >街景地图
        <div class="div1">
          <img class="shell" :src="century2" alt="" />
        </div>
        <div>
          <img
            v-for="(item, index) in centuryimg"
            @click="century2 = item.src"
            :key="index"
            class="shell1"
            :src="item.src"
            alt=""
          />
          <!--  <img class="shell1" src="./../img/世纪城3.webp" alt="">
          <img class="shell1" src="./../img/世纪城4.webp" alt=""> -->
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form:{
        buildingName:"",
        houseInformation:""
      },
      houseNo: "",
      bigimg: "",
      imglist: [],

      steet: require("./../../../public/img/龙湖天宸原著小区图3.webp"),
      streetimg: [
        {
          id: 1,
          src: require("./../../../public/img/龙湖天宸原著小区图1.webp"),
        },
        {
          id: 2,
          src: require("./../../../public/img/龙湖天宸原著小区图2.webp"),
        },
        {
          id: 3,
          src: require("./../../../public/img/龙湖天宸原著小区图4.webp"),
        },
        {
          id: 4,
          src: require("./../../../public/img/龙湖天宸原著小区图1.webp"),
        },
      ],
      century2: require("./../../../public/img/世纪城1.webp"),
      centuryimg: [
        { id: 1, src: require("./../../../public/img/世纪城1.webp") },
        { id: 2, src: require("./../../../public/img/世纪城2.webp") },
        { id: 3, src: require("./../../../public/img/世纪城3.webp") },
        { id: 4, src: require("./../../../public/img/世纪城4.webp") },
      ],
    };
  },
  created() {
    this.houseNo = this.$route.query.houseSerialNumber;
    // this.houseNo = 1
    this.$axios({
      url: "/houseInfo/list",
      method: "GET",
      params: {
        page: 1,
        limit: 1,
        houseSerialNumber: this.houseNo,
        buildingName: "",
        toward: "",
        phone: "",
      },
    }).then((res) => {
      console.log(res);
      this.imglist = res.data[0].indoorFigure.split(",");
      this.form.buildingName = res.data[0].buildingName
      this.form.houseInformation=res.data[0].houseInformation
      this.bigimg = this.imglist[0];
    });
  },
};
</script>

<style lang="less" scoped>
#mapheeead {
  position: relative;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.shell {
  width: 480px;
  height: 480px;
  margin: 10px;
  border: 5px #03c9d75b solid;
  border-radius: 5px;
}

.shell1 {
  width: 150px;
  height: 150px;
  margin: 10px;
  border: 5px #03c9d762 solid;
  border-radius: 5px;
}

.indoor {
  width: 400px;
  height: 200px;
  // border: 1px solid gray;
  // font-size: 3rem;
  position: fixed;
  top: 20%;
  right: 10%;
}
</style>